<template>
  <!-- 查询业务 -->
  <el-form :inline="true" :model="SearchData">
    <el-form-item label="项目编号">
      <el-input v-model="SearchData.projectCode" placeholder="请输入指导项目编号" clearable />
    </el-form-item>
    <el-form-item label="项目名称">
      <el-input v-model="SearchData.projectName" placeholder="请输入指导项目名称" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getTable(1)">查询</el-button>
      <el-button type="primary" @click="getTable(1,'重置')">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 添加业务 -->
  <el-button type="primary" @click="addStateObj">
    添加项目名称
  </el-button>
  <el-dialog v-model="addState" title="添加项目名称" width="80%" draggable>
    <el-form  :model="addData" class="demo-form-inline" label-width="auto">
      <el-form-item label="项目名称" >
        <el-input v-model="addData.projectName" placeholder="请输入项目名称"  />
      </el-form-item>
      <el-form-item label="项目展示图">
        <oneUploadImage :url="projectBaseImgUpload" v-model:oneImage="addData.projectMiniImg"></oneUploadImage>
      </el-form-item>
      <el-form-item label="项目详情图">
        <listUploadImage  :url="projectBaseImgUploadList" v-model:listImage="addData.projectAllImg"></listUploadImage>
      </el-form-item>
      <el-form-item label="项目描述" width="60%">
        <el-input v-model="addData.projectDescribe" :autosize="{ minRows: 8,maxRows: 15}" type="textarea" placeholder="请输入项目描述"  />
      </el-form-item>
      <el-form-item label="项目简介" width="60%">
        <el-input v-model="addData.projectProfile" :autosize="{ minRows: 8,maxRows: 15}" type="textarea" placeholder="请输入项目简介"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addState = false">取消</el-button>
        <el-button type="primary" @click="addTable">
          添加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 展示业务 -->
  <tablePage :tableTitle="tableTitle" @getTableData = 'getTable' @deleteTable = 'deleteTable' @updateTable="updateStateObj" :tableData = 'data'>
    <template v-slot ='scope' >
      <el-button @click="details(scope.row)">查看详情</el-button>
    </template>
  </tablePage>

<!-- 修改业务业务 -->
  <el-dialog v-model="xiugaistate" title="修改项目名称" width="80%" draggable>
    <el-form :model="updateData" class="demo-form-inline">
      <el-form-item label="项目名称" >
        <el-input v-model="updateData.projectName" placeholder="请输入项目名称"  />
      </el-form-item>
      <el-form-item label="项目展示图">
        <oneUploadImage :url="projectBaseImgUpload" v-model:oneImage="updateData.projectMiniImg"></oneUploadImage>
      </el-form-item>
      <el-form-item label="项目详情图">
        <listUploadImage :url="projectBaseImgUploadList" v-model:listImage="updateData.projectAllImg"></listUploadImage>
      </el-form-item>
      <el-form-item label="项目描述" width="60%">
        <el-input v-model="updateData.projectDescribe" :autosize="{ minRows: 8,maxRows: 15}" type="textarea" placeholder="请输入项目描述"  />
      </el-form-item>
      <el-form-item label="项目简介" width="60%">
        <el-input v-model="updateData.projectProfile" :autosize="{ minRows: 8,maxRows: 15}" type="textarea" placeholder="请输入项目简介"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugaistate = false">取消</el-button>
        <el-button type="primary" @click="updateTable">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import tablePage from '../components/table.vue'
import { limit } from '../utils/utilsData'
import { reactive, ref, onMounted } from 'vue'
import oneUploadImage from '../components/oneUploadImage.vue'
import listUploadImage from '../components/listUploadImage.vue'
import {projectBaseInsert,projectBaseDelete,projectBaseUpdate,projectBaseSelect,projectBaseImgUpload,projectBaseImgUploadList} from '../utils/api'

/* 每页显示多少条数据 */
/* 添加数据的弹框状态 */
const addState = ref(false)
/* 添加弹框状态--修改函数 */
const addStateObj = () => { 
  if (addState.value) { 
    addState.value = false
    return
  }
  addState.value = true
  addData.value = {
    projectName: '',
    projectMiniImg: [],
    projectAllImg:[],
    projectDescribe: '',
    projectProfile:''
  }
}
/* 修改数据的弹框状态 */
const xiugaistate = ref(false)
/* 修改弹框状态--修改函数 */
const updateStateObj = (row) => { 
  console.log(xiugaistate.value)
  if (xiugaistate.value) { 
    xiugaistate.value = false
    return
  }
  xiugaistate.value = true
  /* 该函数内部要将表格行数据绑定在修改表单的数据上 */
  updateData.value = {
    ...row,
    projectAllImg:row.projectAllImg.split(',')
  }
}
/* 表格的字段名及对应中文意思 */
const tableTitle = [
  {key:'projectCode',name:'项目名称编号'},
  {key:'projectName',name:'项目名称'},
  {key:'projectMiniImg',name:'项目缩略图'},
  {key:'projectAllImg',name:'项目详情图组'},
  {key:'projectDescribe',name:'项目描述'},
  {key:'projectProfile',name:'项目简介'},
]
/* 表格需要的数据 */
const data = reactive({
  nowPage: 1,
  maxPage: 1,
  data: []
})
/* 查询表单数据 -- 这里修改查询字段*/
const SearchData = reactive({
  limit:limit,
  projectName: '',
  projectCode: ''
})
/* 添加表单的数据 -- 这里修改添加字段*/
const addData = ref({
  projectName: '',
  projectMiniImg: [],
  projectAllImg:[],
  projectDescribe: '',
  projectProfile:''
})
/* 修改表单的数据 -- 这里修改更新字段*/
const updateData = ref({
  projectName:'',
  projectName:'',
  projectName: '',
  projectMiniImg: [],
  projectAllImg:[],
  projectDescribe: '',
  projectProfile:''
})
/* 分页及多条件的查询接口 -- 函数 ajax */
const getTable = (pageNum,chongzhiState) => { 
  console.log(pageNum)
  if (chongzhiState) { 
    /* 将所有查询条件设置为空 */
    SearchData.value = {

    }
  }
  projectBaseSelect({
    page: pageNum,
    ...SearchData
  }).then(resp => { 
    data.nowPage = resp.nowPage
    data.maxPage =  resp.maxPage
    data.data = resp.data
  })
  data.nowPage = pageNum
}

/* 添加业务--函数ajax */
const addTable = () => { 
  // 发起ajax 例子如下 
  addData.value.projectAllImg = addData.value.projectAllImg.toString()
  projectBaseInsert({
    ...addData.value
  }).then(res => {
    addStateObj()
    getTable(1)
  })
}
/* 查询业务--函数ajax */
const updateTable = () => { 
  // 发起ajax 例子如下
  updateData.value.projectAllImg = updateData.value.projectAllImg.toString()
  projectBaseUpdate({
    ...updateData.value
  }).then(resp => { 
    updateStateObj()
    getTable(1)
  })
}
/* 删除业务--函数ajax */
const deleteTable = (row) => { 
  projectBaseDelete({
    id:row.id
  }).then(resp => { 
    getTable(1)
  })
}
/* 页面加载完毕后执行的函数--渲染首页数据 */

onMounted(() => { 
  getTable(1)
})
const details = (row) => { 
  console.log(row)
}

</script>
<style scoped>
</style>